<template>
  <div>
    <div class="box show" v-show="visible" @click.self="layer">
      <div class="model show">
        <div
          class="zh-header"
          :style="{ 'text-align': center ? 'center' : 'left' }"
        >
          <slot name="title">
            <span class="dialog_title">{{ title }}</span>
          </slot>
          <button class="dialog_headerbtn" @click="layer">X</button>
        </div>
        <div class="body">
          <slot name="body">这里是内容</slot>
        </div>
        <div>
          <slot name="foot"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'dialog1',
  props: {
    visible: {
      type: Boolean,
    },
    title: {
      type: String,
      default: '标题',
    },
    center: {
      type: Boolean,
    },
    left: {
      type: Boolean,
    },
  },
  methods: {
    layer() {
      console.log(this.visible)
      this.$emit('update:layer', !this.visible)
    },
  },
  mounted() {
    console.log(this.center)
  },
}
</script>

<style scoped lang="scss">
.box {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
  overflow: auto;
  margin: 0;
  &.show {
    animation: show-box 0.3s linear forwards;
  }
}
.model {
  position: fixed;
  left: 50%;
  top: 20%;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  transform: translate(-50%, -20%);
  z-index: 1000;
  width: 30%;
  &.show {
    animation: show-model 0.3s linear forwards;
  }

  .zh-header {
    padding: 8px 10px;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    cursor: pointer;
    text-align: left;
    position: relative;
    .dialog_headerbtn {
      position: absolute;
      top: 8px;
      right: 10px;
      border: none;
      background: #fff;
    }
    .dialog_headerbtn:hover {
      color: blue;
      cursor: pointer;
    }
  }
  .body {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    box-sizing: border-box;
  }
  .foot {
    width: 100%;
    text-align: right;

    .btn1 {
      width: 70px;
      height: 40px;
      background: #fff;
      border: 1px solid #e6e3e3;
      border-radius: 6px;
      margin: 10px;
      color: #000;
    }
    .btn2 {
      width: 70px;
      height: 40px;
      background: #409eff;
      border: none;
      border-radius: 6px;

      margin: 10px;
      color: #fff;
    }
    .btn1:hover {
      color: #409eff;
      background: #c6e2ff;
      background: #ecf5ff;
      cursor: pointer;
    }
    .btn2:hover {
      background: #66b1ff;
      cursor: pointer;
    }
  }
}
@keyframes show-model {
  0% {
    opacity: 0;
    margin-top: 0;
  }
  100% {
    opacity: 1;
    margin-top: 30px;
  }
}

@keyframes show-box {
  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}
</style>
